<template>
    <div class="full feature">
        <scrollbar>
            <div ref="m" class="masonry">
                <ul ref="grid" class="grid clearfix">
                    <li class="grid-sizer"></li>
                    <transition-group name="scale">
                        <li ref="item" class="grid-item"
                            v-for="item in items"
                            :key="item.id">
                            <a class="grid-link" href="javascript:;">
                                <div class="picbox">
                                    <img :src="item.img_url" :alt="item.title">
                                </div>
                            </a>
                        </li>
                    </transition-group>
                </ul>
                <div class="loading">loading</div>
                <back2top></back2top>
            </div>
        </scrollbar>
    </div>
</template>

<script>
    
    // import Scrollbar from '@/components/Scrollbar';
    // import BackTop from '@/components/BackTop';
    
	export default {
		name: 'feature',
        data() {
		    return {
		        items: []
            };
        },
        created() {
        
        },
        computed: {
		    
        },
        mounted(){
		    let data = [1, 2, 3, 4, 5, 6].map((id, i) => {
                return {
                    id: id,
                    img_url: `/static/images/cp-pic${(i + 1)}.jpg`
                }
            });
            let data2 = [7, 8, 9, 10, 11, 12].map((id, i) => {
                return {
                    id: id,
                    img_url: `/static/images/cp-pic${(i + 1)}.jpg`
                }
            });
		    this.fn.imgReady(data, 'img_url', () => {
                this.items = data;
                this.layout();
                setTimeout(() => {
                    this.items.push(...data2);
                }, 3000);
            });
        },
        methods: {
            layout(){
                this.$nextTick(() => {
                    if(!this.grid){
                        this.grid = new this.Grid(this.$refs.grid, {});
                    }else{
                        this.grid.append(this.$refs.item);
                    }
                });
            }
        }
	}
</script>

<style lang="scss" scoped>
    
    .scale-enter-active, .scale-leave-active {
        transition: all 1s;
        opacity: 1;
        transform: scale(1);
    }
    .scale-enter, .scale-leave-to {
        opacity: 0;
        transform: scale(.8);
    }
    
    .feature{
        overflow: hidden;
    }
    
    .masonry{
        overflow: hidden;
    }
    
    .grid{
        margin: 0 -15px;
    }
    
    .grid-sizer,
    .grid-item{
        width: calc(100% / 3);
    }
    
    .grid-item{
        float: left;
        box-sizing: border-box;
        margin-bottom: 30px;
        padding: 0 15px;
    }
    
    .grid-link{
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    .picbox img{
        display: block;
    }
    
</style>
